<template>
  <div>
    <medicalCard title="科室管理">
      <template v-slot:head>
        <Form ref="formInline" :label-width="70" inline>
          <FormItem label="医院">
            <Select v-model="params.hospital_id" placeholder="医院" style="width: 100%" filterable clearable >
              <Option v-for="item in hospitalList" :value="item.hospital_id" :key="item.hospital_id" :label="item.hospital_name">{{ item.hospital_name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="科室名称">
            <Input v-model="params.hospital_name" type="text" clearable placeholder="科室名称" class="headFormItemWidth" />
          </FormItem>
          <FormItem >
            <Button icon="md-search" type="primary" class="headFormItemButton" @click="search" >搜索</Button>
            <Button icon="md-redo" class="headFormItemButton" @click="reload()" >重置</Button>
          </FormItem>
        </Form>
        <Divider style="margin-top:0px;" />
      </template>
      <template v-slot:body>
        <template>
          <Button icon="md-add" type="success" class="headFormItemButton" @click="add('1')">新增</Button>
          <Button icon="md-trash" type="error" class="headFormItemButton" @click="('1')">删除</Button>
        </template>
        <vxe-table border="outer" header-align="center" ref="my_table"
                   :loading="loading"
                   :data="tableData"
                   :stripe="true"
                   style="margin-top: 5px;margin-bottom: 10px"
                   :highlight-hover-row="true"
                   :scroll-x="{gt: 0}" align="center" show-overflow="tooltip">
          <vxe-table-column width="60" fixed="left" type="checkbox"></vxe-table-column>
          <vxe-table-column field="hospital_name" fixed="left" title="所属医院" min-width="200"></vxe-table-column>
          <vxe-table-column field="department_name" title="科室名称" min-width="200"></vxe-table-column>
          <vxe-table-column field="sort" title="排序" min-width="200">
            <template v-slot="{ row }">
              <Poptip v-model="row.poptipVisible" placement="top" style="z-index: 9999" :transfer='true'>
                <a href="javascript:void(0);" style="color: #2D8cF0;" @click="row.newSort = row.sort">{{row.sort}}</a>
                <template #content>
                  <Input type="text" clearable v-model="row.newSort" class="headFormItemWidth" />
                  <Button type="success"  icon="md-checkmark" style="padding: 0;margin-left: 2px" @click="editSort(row)"></Button>
                  <Button icon="md-close" style="padding: 0;margin-left: 2px" @click="row.poptipVisible = false"></Button>
                </template>
              </Poptip>
            </template>
          </vxe-table-column>
          <vxe-table-column field="state" title="状态" min-width="200">
            <template v-slot="{ row }">
              <i-Switch v-model="row.state" size="large" true-color="#13ce66" false-color="#ff4949" true-value="1" false-value="2" @on-change="editState(row)">
                <template #open>
                  <span>开启</span>
                </template>
                <template #close>
                  <span>关闭</span>
                </template>
              </i-Switch>
            </template>
          </vxe-table-column>
          <vxe-table-column width="200" fixed="right" title="操作">
          <template scp-layout="true" v-slot="{ row }">
            <ButtonGroup>
              <Button type="success" icon="md-git-branch" style="padding: 0" @click="showTable(row)"></Button>
              <Button type="warning" icon="md-create" style="padding: 0" @click="edit(row,'1')"></Button>
              <Button type="error" icon="md-trash" style="padding: 0" @click="del(row)"></Button>
            </ButtonGroup>
          </template>
          </vxe-table-column>
        </vxe-table>
<!--        <Table border ref="selection" :loading="loading" :columns="columns" :data="tableData" style="margin-top: 5px;margin-bottom: 10px"></Table>-->
        <Row type="flex" justify="end">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
      </template>
    </medicalCard>
    <Modal v-model="modal.show" draggable sticky scrollable :closable="false" :mask="false" :title="modal.title" width="750">
      <Row>
        <Col span="22" offset="1">
          <Form ref="formInline" :label-width="70" label-colon >
            <Row v-show="!this.row.hospital_id">
              <Col span="24">
                <FormItem label="医院">
                  <Select v-model="modal.data.hospital_id" placeholder="医院" style="width: 100%" filterable clearable label-in-value @on-select="selectHospital">
                    <Option v-for="item in hospitalList" :value="item.hospital_id" :key="item.hospital_id" :label="item.hospital_name">{{ item.hospital_name }}</Option>
                  </Select>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="科室名称" >
                  <Input  v-model="modal.data.department_name" type="text" clearable placeholder="科室名称" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="排序" >
                  <InputNumber :max="99999" :min="0" placeholder="排序" v-model="modal.data.sort" style="width: 100%" />
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="24">
                <FormItem label="状态" >
                  <RadioGroup v-model="modal.data.state" type="button" button-style="solid">
                    <Radio label="1">开启</Radio>
                    <Radio label="2">关闭</Radio>
                  </RadioGroup>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Col>
      </Row>
      <template #footer>
        <Button @click="modal.show = false">取消</Button>
        <Button type="primary" @click="addOk()">确定</Button>
      </template>
    </Modal>
    <Modal v-model="modal2.show" draggable sticky scrollable :closable="false" :mask="false" :title="modal2.title" width="1000">
      <template>
        <Button icon="md-add" type="success" class="headFormItemButton" @click="add('2')">新增</Button>
        <Button icon="md-trash" type="error" class="headFormItemButton" @click="delList('2')">删除</Button>
      </template>
      <vxe-table border="outer" header-align="center" ref="my_table2"
                 :loading="loading2"
                 :data="tableData2"
                 :stripe="true"
                 style="margin-top: 5px;margin-bottom: 10px"
                 :highlight-hover-row="true"
                 :scroll-x="{gt: 0}" align="center" show-overflow="tooltip">
        <vxe-table-column width="60" fixed="left" type="checkbox"></vxe-table-column>
        <vxe-table-column field="department_name" title="科室名称" min-width="200"></vxe-table-column>
        <vxe-table-column field="sort" title="排序" min-width="200">
          <template v-slot="{ row }">
            <Poptip v-model="row.poptipVisible" placement="top" style="z-index: 9999" :transfer='true'>
              <a href="javascript:void(0);" style="color: #2D8cF0;" @click="row.newSort = row.sort">{{row.sort}}</a>
              <template #content>
                <Input type="text" clearable v-model="row.newSort" class="headFormItemWidth" />
                <Button type="success"  icon="md-checkmark" style="padding: 0;margin-left: 2px" @click="editSort(row)"></Button>
                <Button icon="md-close" style="padding: 0;margin-left: 2px" @click="row.poptipVisible = false"></Button>
              </template>
            </Poptip>
          </template>
        </vxe-table-column>
        <vxe-table-column field="state" title="状态" min-width="200">
          <template v-slot="{ row }">
            <i-Switch v-model="row.state" size="large" true-color="#13ce66" false-color="#ff4949" true-value="1" false-value="2" @on-change="editState(row)">
              <template #open>
                <span>开启</span>
              </template>
              <template #close>
                <span>关闭</span>
              </template>
            </i-Switch>
          </template>
        </vxe-table-column>
        <vxe-table-column width="200" fixed="right" title="操作">
          <template scp-layout="true" v-slot="{ row }">
            <ButtonGroup>
              <Button type="warning" icon="md-create" style="padding: 0" @click="edit(row, '2')"></Button>
              <Button type="error" icon="md-trash" style="padding: 0" @click="del(row)"></Button>
            </ButtonGroup>
          </template>
        </vxe-table-column>
      </vxe-table>
      <!--        <Table border ref="selection" :loading="loading" :columns="columns" :data="tableData" style="margin-top: 5px;margin-bottom: 10px"></Table>-->
      <Row type="flex" justify="end">
        <Page :current="params2.pageNo" :total="params2.totalRecord" show-sizer :page-size="params2.pageSize" show-elevator
              @on-change="pageAction2" @on-page-size-change="pageSizeChange2"/>
      </Row>
    </Modal>
  </div>

</template>

<script>
import medicalCard from '@/view/medical-page/components/medical-card'
import {
  deleteHospitalDepartment,
  getHospitalDepartmentPageList,
  getHospitalList,
  insertHospitalDepartment,
  updateHospitalDepartment
} from '@/api/medical'
export default {
  name: 'hospital-department-list',
  components: {
    medicalCard
  },
  data () {
    return {
      loading1: false,
      loading: false,
      loading2: false,
      row: {},
      modal: {
        show: false,
        type: null,
        data: {},
        title: ''
      },
      modal2: {
        show: false,
        type: null,
        data: {},
        title: ''
      },
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      params2: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      tableData: [],
      tableData2: [],
      hospitalList: []
    }
  },
  computed: {
  },
  inject: [
    'reload'
  ],
  methods: {
    showTable (row) {
      this.row = row
      this.params2.department_id = row.id
      this.modal2.title = '二级科室'
      this.init2()
      this.modal2.show = true
    },
    search () {
      this.params.pageNo = 1
      this.params.totalRecord = 0
      this.init()
    },
    selectHospital (e) {
      this.modal.data.hospital_name = e.label
    },
    init2 () {
      this.loading2 = true
      getHospitalDepartmentPageList(this.params2).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData2 = ret.data.data.results
          this.params2.totalRecord = ret.data.data.totalRecord
          this.loading2 = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    init () {
      this.loading = true
      this.params.level = '1'
      getHospitalDepartmentPageList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    getHospitalList () {
      getHospitalList().then(ret => {
        if (ret.data.errcode === 0) {
          this.hospitalList = ret.data.data
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    del (row) {
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteHospitalDepartment({ id: row.id }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    add (type) {
      this.modal.data = {}
      this.modal.data.level = type
      if (type === '2') {
        this.modal.data.hospital_id = this.row.hospital_id
        this.modal.data.hospital_name = this.row.hospital_name
        this.modal.data.department_id = this.row.id
      }
      this.modal.data.sort = 0
      this.modal.title = '新增'
      this.modal.type = 0
      this.modal.show = true
    },
    editSort (row) {
      let params = {
        id: row.id,
        sort: row.newSort
      }
      this.updateHospitalDepartment(params)
    },
    editState (row) {
      let params = {
        id: row.id,
        state: row.state
      }
      this.updateHospitalDepartment(params)
    },
    edit (row, type) {
      this.modal.title = '修改'
      this.modal.data = row
      this.modal.type = 1
      if (type === '2') {
        this.modal.data.hospital_id = this.row.hospital_id
        this.modal.data.hospital_name = this.row.hospital_name
        this.modal.data.department_id = this.row.id
      }
      this.modal.show = true
    },
    addOk () {
      if (!this.modal.data.hospital_id) {
        this.$Message.error({
          content: '请选择医院！'
        })
        return
      }
      if (!this.modal.data.department_name) {
        this.$Message.error({
          content: '请添加科室！'
        })
        return
      }
      if (!this.modal.data.sort) {
        this.$Message.error({
          content: '请选择排序！'
        })
        return
      }
      if (!this.modal.data.state) {
        this.$Message.error({
          content: '请选择状态！'
        })
        return
      }
      if (this.modal.type === 0) {
        insertHospitalDepartment(this.modal.data).then(ret => {
          if (ret.data.errcode === 0) {
            this.modal.show = false
            this.$Message.success({
              content: '操作成功,\n' + ret.data.errmsg
            })
            this.init()
            this.init2()
          } else {
            this.$Message.error({
              content: '操作失败,\n' + ret.data.errmsg
            })
          }
        })
      }
      if (this.modal.type === 1) {
        this.updateHospitalDepartment(this.modal.data)
      }
    },
    updateHospitalDepartment (e) {
      updateHospitalDepartment(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.modal.show = false
          this.$Message.success({
            content: '操作成功,\n' + ret.data.errmsg
          })
          this.init()
          this.init2()
        } else {
          this.$Message.error({
            content: '操作失败,\n' + ret.data.errmsg
          })
        }
      })
    },
    delList (type) {
      let selectRecords
      if (type === '1') {
        selectRecords = this.$refs.my_table.getCheckboxRecords()
      }
      if (type === '2') {
        selectRecords = this.$refs.my_table2.getCheckboxRecords()
      }
      if (!selectRecords || selectRecords.length === 0) {
        this.$Message.error({
          content: '操作失败,\n' + '请选择删除项'
        })
        return
      }
      let array = selectRecords.map((item) => item.id)
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteHospitalDepartment({ array: array }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
              this.init2()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    pageAction2 (page) {
      this.params2.pageNo = page
      this.init2()
    },
    pageSizeChange2 (e) {
      this.params2.pageSize = e
      this.init2()
    }
  },
  watch: {
  },
  mounted () {
    this.init()
    this.getHospitalList()
  }
}
</script>
<style scoped>
#mapHospitalAddress {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
}
.headFormItemWidth{
  width: 200px;
}
.headFormItemButton{
  margin-right: 10px;
}
.formItem{
  float: right;
}
</style>
